<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Examples :: Metro 4 - Popular HTML, CSS and JS library</title>

    <style>
        h4 {
            white-space: nowrap;
        }

        @media all and (min-width: 768px) {
            .hero {
                padding: 160px 80px 120px;
            }

            .neb-white {
                height: auto;
            }

        }

        [class*=cell-md-3] {
            display: flex;
            flex-flow: column;
            justify-content: flex-start;
        }

        [class*=cell-md-3] div:last-child {
            display: flex;
            justify-content: space-between;
            margin-top: auto!important;
        }
    </style>

</head>
<body class="m4-cloak">

<div class="container-fluid pos-fixed fixed-top z-top bg-hero" id="header">
    <header class="app-bar container bg-transparent fg-white pos-relative" data-role="appbar" data-expand-point="md">
        <a href="index.html" class="brand fg-white no-hover text-bold">METRO_4</a>
        <ul class="app-bar-menu ml-auto text-upper">
            <li><a href="index.html" class="app-bar-item">Home</a></li>
            <li><a href="intro.html" class="app-bar-item">Get Started</a></li>
            <li><a href="m4q-about.html" class="app-bar-item">Components</a></li>
            <li><a href="examples.html" class="app-bar-item">Examples</a></li>
            <li><a href="support.html" class="app-bar-item">Support</a></li>
            <li><a href="https://github.com/olton/Metro-UI-CSS" class="app-bar-item">GitHub</a></li>
        </ul>
    </header>
</div>

<div class="container-fluid">
    <div class="container">
        <h1>Pandora - Admin template</h1>
        <h5>super big example for all features</h5>

        <div>
            <a href="https://metroui.org.ua/themes/pandora/"><img src="https://user-images.githubusercontent.com/365108/56853343-eef5a980-692e-11e9-8613-b7e42a913383.jpg" style="max-width: 100%"></a>
        </div>

        <div class="mt-10">
            <b>Pandora</b> - is a Responsive and Clean Admin Dashboard template. This template created with Metro 4 with uses native classes, elements, and components. The template contains different types of reusable and professional responsive components with different variations.
            <br>
            <br>
            This template was created using the classes and components of Metro 4 to demonstrate the capabilities of Metro 4. You can easily do all this on Metro 4.
            <br>
            <br>
            <b>Pandora</b> comes with a mega collection of features which can make admin dashboard of any projects like Small to Medium and Large sizes of projects including Personal projects, eCommerce, CRM, ERP, SaaS, PaaS, CMS, Back office and Accounting Software backend etc. The Multipurpose feature of the dashboard template will allow integrating for different types of business projects.
            <br>
            <br>
            <b>Pandora</b> offers a creative and easy way to develop admin backend for your next exciting projects.
        </div>

        <div class="mt-4">
            <a href="https://metroui.org.ua/themes/pandora/" class="button warning">Goto pandora demo</a>
            <a href="https://metroui.org.ua/themes/pandora/" class="button info">Get source</a>
            <a href="https://www.patreon.com/metroui" rel="nofollow">
                <img src="https://camo.githubusercontent.com/c11c9bdf1f6c2a1d80afb11859984a61f0fadfa6/68747470733a2f2f63352e70617472656f6e2e636f6d2f65787465726e616c2f6c6f676f2f6265636f6d655f615f706174726f6e5f627574746f6e4032782e706e67" width="160" data-canonical-src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" style="max-width:100%;">
            </a>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="container mt-4 mb-4">

        <!-- ads-html -->
        <div class="example no-border p-0"></div>

        <h2 class="mt-20">Metro 4 Features</h2>
        <div class="row mt-10">
            <div class="cell-md-3">
                <h4 class="text-light">Start page</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-tiles-start.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates the use of tiles.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/tiles/start.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/tiles">Source</a>
                </div>
            </div>
            <div class="cell-md-3">
                <h4 class="text-light">Login page</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-forms-login.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates how to create login form.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/forms/login.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/forms">Source</a>
                </div>
            </div>
            <div class="cell-md-3">
                <h4 class="text-light">Color schemes</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-colors-schemes.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates colors schemes.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/schemes/scheme.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/schemes">Source</a>
                </div>
            </div>
            <div class="cell-md-3">
                <h4 class="text-light">Dialogs</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-dialogs.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates how to use dialogs.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/dialogs/dialogs.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/dialogs">Source</a>
                </div>
            </div>
        </div>

        <div class="row mt-6">
            <div class="cell-md-3">
                <h4 class="text-light">Desktop</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-desktop.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates how to use windows.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/desktop/desktop.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/desktop">Source</a>
                </div>
            </div>
            <div class="cell-md-3">
                <h4 class="text-light">Cube</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-cube.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates how to use cube.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/cube/cube.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/cube">Source</a>
                </div>
            </div>
            <div class="cell-md-3">
                <h4 class="text-light">Cube custom</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-cube-custom-func.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates how to use cube.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/cube/cube-custom-func.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/cube">Source</a>
                </div>
            </div>
            <div class="cell-md-3">
                <h4 class="text-light">Select in runtime</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-select-options.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates how to change options in select at runtime.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/ajax/select.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/ajax">Source</a>
                </div>
            </div>
        </div>

        <div class="row mt-6">
            <div class="cell-md-3">
                <h4 class="text-light">Color module</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-color-module-all.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates capabilities color module.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/colors/color-schemes.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/colors">Source</a>
                </div>
            </div>
            <div class="cell-md-3">
                <h4 class="text-light">Colors generator</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-color-module-generator.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates capabilities color module.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/colors/color-schemes-2.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/colors">Source</a>
                </div>
            </div>
            <div class="cell-md-3">
                <h4 class="text-light">Colors grayscale</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-color-module-grayscale.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates capabilities color module.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/colors/color-schemes-grayscale.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/colors">Source</a>
                </div>
            </div>
            <div class="cell-md-3">
                <h4 class="text-light">Date picker</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-datepicker.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates date picker component.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/datetime/datepicker.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/datetime">Source</a>
                </div>
            </div>
        </div>

        <div class="row mt-6">
            <div class="cell-md-3">
                <h4 class="text-light">Github page</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-github.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates any aspects of Metro 4.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/github/github.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/github">Source</a>
                </div>
            </div>
        </div>

        <div class="row mt-6">
            <div class="cell-md-3">
                <h4 class="text-light">Table HTML</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-table-html.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates table component.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/table/table-html.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/table">Source</a>
                </div>
            </div>

            <div class="cell-md-3">
                <h4 class="text-light">Table JSON</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-table-json.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates table component with 100K records.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/table/table-100K.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/table">Source</a>
                </div>
            </div>

            <div class="cell-md-3">
                <h4 class="text-light">Table Methods</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-table-methods.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates table methods.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/table/table-methods.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/table">Source</a>
                </div>
            </div>

            <div class="cell-md-3">
                <h4 class="text-light">Table inspector</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-table-inspector-export-custom-func.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates table inspector, table export and custom filter for table component.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/table/table-inspector-export-custom-func.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/table">Source</a>
                </div>
            </div>

        </div>

        <h2 class="mt-20">Metro 4 third-party plugins support</h2>
        <div class="row mt-10">
            <div class="cell-md-3">
                <h4 class="text-light">Datatable</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-datatable.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates using Datatable plugin in Metro 4.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/third-party/datatable.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/third-party">Source</a>
                </div>
            </div>

            <div class="cell-md-3">
                <h4 class="text-light">Select2</h4>
                <div class="img-container img-thumbnail">
                    <img src="images/examples-select2.jpg">
                    <div class="image-overlay d-flex flex-align-center">
                        <p class="h5 text-light">The example demonstrates using Select2 plugin in Metro 4.</p>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="examples/third-party/select2.html">Demo</a>
                    <a href="https://github.com/olton/Metro4-Docs/tree/master/public_html/examples/third-party">Source</a>
                </div>
            </div>
        </div>

    </div>
</div>

<footer class="footer-bg">
    <div class="container pt-20 pb-20">
        <div class="text-center">
            <ul class="inline-list reduce-1" id="social-menu">
                <li><a href="https://www.facebook.com/groups/metro4.libary/"><span class="mif-facebook"></span></a></li>
                <li><a href="https://twitter.com/MetroUI"><span class="mif-twitter"></span></a></li>
                <li><a href="#"><span class="mif-youtube"></span></a></li>
                <li><a href="https://github.com/olton/Metro-UI-CSS"><span class="mif-github"></span></a></li>
            </ul>
        </div>

        <div class="text-center mt-10">
            <ul class="inline-list reduce-1" id="footer-menu">
                <li><a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">License</a></li>
                <li><a href="https://pimenov.com.ua">Author</a></li>
                <li><a href="https://forum.metroui.org.ua">Forum</a></li>
                <li><a href="https://github.com/olton/Metro-UI-CSS/issues">Issues</a></li>
                <li><a href="https://github.com/olton/Metro-UI-CSS/releases">Releases</a></li>
            </ul>
        </div>

        <div class="text-center m-10">
            <span class="h2"><span class="fg-cyan">Made in </span><span class="fg-yellow">Ukraine</span></span>
        </div>

        <div class="text-center mt-10 reduce-1">
            Metro 4 (Metro UI CSS) &copy; 2012-2019 by <a href="https://pimenov.com.ua" class="no-wrap">Sergey Pimenov</a>.
            <br />
            <span class="no-wrap">Domain by <a href="https://imena.ua/">Imena.ua</a>.</span>
            <span class="no-wrap">Hosting by <a href="https://mirohost.net/">Mirohost</a>.</span>
            <br/>
            <span class="no-wrap">Metro CDN by <a href="https://www.keycdn.com/">KeyCDN</a>.</span>
            <br/>
            <span class="no-wrap">IDE PhpStorm by <a href="https://www.jetbrains.com/">JetBrains</a>.</span>
            <br />
            Currently <span class="version-number-full"></span>. Code licensed <a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
        </div>
    </div>
</footer>

<script src="metro/js/metro.js?ver=@@b-version"></script>
<script>
    $(".version-number").html(Metro.ver());
</script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
<script>
    setTimeout(function(){
        var b = $(".adsbygoogle");
        var div = $(".example");

        if (Metro.utils.isLocalhost()) {
            return ;
        }

        if (b.length === 0) {
            // div.html("<div class='bg-red fg-white p-4 text-center h3 text-light'>With your help, I can make Metro 4 even better! Please, disable AdBlock or AdGuard.<br>Thank you for your support!</div>");
        } else {
            $.each(b, function(){
                var bl = $(this);
                if (bl.height() < 50 || Metro.utils.getStyleOne(bl, 'display') === 'none') {
                    // div.html("<div class='bg-red fg-white p-4 text-center h3 text-light'>With your help, I can make Metro 4 even better! Please, disable AdBlock or AdGuard.<br>Thank you for your support!</div>");
                }
            });
        }
    }, 1000)
</script>

</body>
</html>